<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="../../vueCore/vue.min.2.7.14.js"></script>
		<!-- 引入样式 -->
		<link
			rel="stylesheet"
			href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
		/>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<link rel="stylesheet" href="./css/index.css" />
		<title>关于</title>
		<style>
			.about-item-content {
				width: 100%;
				height: 100% !important;
				min-height: 500px;
				color: #000;
				text-align: center;
				/* padding: 0 200px !important; */
				/* background-color: red !important; */
			}

			.about-item-content img {
				width: 100%;
				height: 500px;
				object-fit: cover;
				margin-bottom: 50px;
			}
		</style>
	</head>

	<body>
		<div class="about" id="root">
			<div class="container">
				<el-menu
					:default-active="navActive"
					text-color="#000"
					active-text-color="#409EFF"
					class="el-menu-demo"
					mode="horizontal"
				>
					<el-menu-item
						v-for="(item, index) in nav"
						:key="index"
						:index="index + ''"
						class="meun-item"
						@click="toPage(item)"
					>
						{{item.label}}
					</el-menu-item>
					<!-- <el-alert class="head-text-suc" :closable="false" :title="headText" type="success">
        </el-alert>
        <el-alert class="head-text-suc" :closable="false" title="不渝盟誓 ，情约今生" type="error">
        </el-alert>
        <span class="time">{{time}}</span> -->
				</el-menu>

				<div class="content">
					<div class="content-item about-item-content">
						<!-- <h1 style="margin-bottom: 10px;">关于我们</h1>
          <p style="line-height: 40px;" v-html="nodeText">
          </p> -->
						<img
							src="https://res.darryring.com/webimg/brand/banner.jpg"
							alt=""
						/>
						<h3
							style="
								color: #5b3f35;
								font-size: 30px;
								margin-bottom: 30px;
							"
						>
							品牌理念
						</h3>
						<div style="width: 100%; min-height: 50px">
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								无论时代如何变化，每个人在内心深处依然渴望一生一世的真爱
							</p>
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								DR钻戒品牌凝聚最虔诚、最有态度的真爱信仰
							</p>
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								希望通过自身力量让爱情变得更美好
							</p>
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								让坚信真爱的人都能找到一生唯一真爱
							</p>
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								把真爱信仰传播到世界的各个角落
							</p>
							<p
								style="
									color: #696665;
									font-size: 16px;
									margin-bottom: 30px;
								"
							>
								这是DR创建的初衷，也是品牌一直以来的追求
							</p>
						</div>
					</div>
				</div>

				<div class="footer">
					<!-- <el-divider content-position="left">
          快看！好多星星✨
        </el-divider>
        <div class="footer-item">
          <el-tag v-for="(item,index) in footer" :type="item.t" :key="index"
            style="margin-right: 10px;cursor: pointer;">
            {{item.x}}
          </el-tag>
          <el-badge :value="99" class="badge-item">
            <el-button size="small" style="width: 100%;">科技改变生活</el-button>
          </el-badge>
        </div> -->
					<div class="bottom-text">
						<p>商务合作|联系我们|加入我们</p>
						<p>Wedding Ring Network</p>
						<!-- <P>关注我们可以获得更多旅游小Tips</P> -->
						<!-- <p><a href="https://www.baidu.com/">更多旅游景区点击这里</a></p> -->
					</div>
				</div>
			</div>

			<!-- <div id="particle_container">
      <div class="particle_item1"></div>
      <div class="particle_item2"></div>
      <div class="particle_item3"></div>
    </div> -->
		</div>

		<script>
			let timer = null;
			let index = 0;
			const vm = new Vue({
				el: '#root',
				data: {
					textList: ['永远对美好的事情抱有期待'],
					nav: [
						{ label: '首页' },
						{ label: '详情' },
						{ label: '品牌故事' }
					],
					footer: [
						{ x: '首页', t: 'success' },
						{ x: '联系我们', t: 'error' },
						{ x: '关于我们', t: 'warning' },
						{ x: '技术支持', t: 'info' },
						{ x: '赞助👍', t: '' }
					],
					navActive: '2',
					headText: `
        如果你还没下定决心，请不要送她「守护一生」
        `,
					text: `
        无论时代如何变化，每个人在内心深处依然渴望一生一世的真爱
        DR钻戒品牌凝聚最虔诚、最有态度的真爱信仰
        希望通过自身力量让爱情变得更美好
        让坚信真爱的人都能找到一生唯一真爱
        把真爱信仰传播到世界的各个角落
        这是DR创建的初衷，也是品牌一直以来的追求,
        如果你还没下定决心，请不要送她「守护一生」`,
					swiper: [
						{ id: 1, src: './images/s-1.jpeg' },
						{ id: 2, src: './images/s-2.jpg' },
						{ id: 3, src: './images/s-3.jpg' }
					],
					time: '',
					nodeText: ''
				},
				created() {
					this.forAddText();
					// this.popupNotify('欢迎来到我的空间站')
					setInterval(() => {
						this.time = new Date().toLocaleString();
					}, 1000);
				},
				methods: {
					popupNotify(message = '消息', title = '信息提示') {
						this.$notify({
							title,
							message
						});
					},
					forAddText() {
						timer = setInterval(() => {
							this.nodeText = this.text.substring(0, index);
							index++;
							if (index === this.text.length + 1) {
								clearInterval(timer);
							}
						}, 60);
					},
					toPage(item) {
						if (item.label === '详情') {
							window.location.href = './about.html';
						} else {
							window.location.href = './demo.html';
						}
					}
				}
			});
		</script>
	</body>
</html>
